<template>
  <div
    class="my-container"
    :style="{
                  width: detail.position.w-5 + 'px',
                  height: detail.position.h-5 + 'px',
              }"
  >
    <q-img
      :class="{ 'my-animation': isPlay }"
      :src="param.url"
      :style="{
          'width': detail.position.w-8 + 'px',
          'height': detail.position.h-8 + 'px'
        }"
      />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, toRefs, watch, PropType } from 'vue';
import { CVariableDataItem, CGraphEntity, CDynamicDataItem, CDataNode } from 'stores/editorModels';
import { useMessageNotify } from 'src/hook/common/useMessageNotify';
import { CAnimationPropertyItem } from 'components/views/animation/animationViewModel';

export default defineComponent({
  name: 'ViewAnimationRotate',
  props: {
    detail: {
      type: Object,
      default: {} as CGraphEntity
    },
    dynamicData: {
      type: Array as PropType<CVariableDataItem[]>,
      default: () => {
        return [] as CVariableDataItem[]
      }
    }
  },

  setup (props, context) {
    // 响应数据解构
    const {
      detail,
      dynamicData
    } = toRefs(props);

    //错误通知
    const {
      showMessage
    } = useMessageNotify();

    //响应数据
    let param = ref<CAnimationPropertyItem>({
      url: 'https://cdn.quasar.dev/img/parallax2.jpg'
    });

    //数据部分
    let xyData = ref<CDynamicDataItem[]>([]);

    //动画播放控制变量
    let isPlay = ref(true);

    //动画播放判断
    const startAnimation = () => {
      isPlay.value = true;
    }

    //属性更新
    const configProperty = () => {
      //生成配置属性
      if ((detail.value?.propsItem) &&
        (detail.value?.propsItem.length > 0)) {
        let i = 0;
        param.value.url = detail.value.propsItem[i++].value;
      } else {
        showMessage('AnimationRotate属性设定值不符！');
        return;
      }

      //生成数据节点
      if ((detail.value?.dataItem) && (detail.value?.dataItem.length > 0)) {
        xyData.value.length = 0;
        detail.value.dataItem.forEach((item: CDataNode) => {
          xyData.value.push({
            vid: item.variableValue,
            name: item.nodeValue,
            value: 0
          });
        });
      }

      //动画播放
      startAnimation();
    }

    //更新数据
    const refreshDynamicData = () => {
      //动态数据
      if ((dynamicData.value) && (dynamicData.value.length > 0)) {
        dynamicData.value.forEach((el, index) => {
          if (xyData.value[index].vid === el.varId) {
            xyData.value[index].value = el.vData;
          }
        });
      }
    }

    //初始化
    const init = () => {
      configProperty();
      refreshDynamicData();
    }

    //监视属性变化
    watch(() => detail, () => {
      configProperty();
    }, { deep: true });

    //监视变量变化
    watch(() => dynamicData, () => {
      refreshDynamicData();
    }, { deep: true })

    //挂载组件
    onMounted(() => {
      init();
    });


    return {
      detail,
      param,
      isPlay
    };
  }
});
</script>

<style lang="scss" scoped>
@keyframes in-rotation {
  0% {
   transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.my-animation {
  animation: in-rotation 1s linear 0s infinite normal;
}

</style>
